<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    li{
      line-height: 40px
    }
    span{
      color: red
    }
  </style>
</head>
<body>
  <h2>HTML5脚本编程</h2>
  <ul>
    <li>
      <h3>跨文档消息传递</h3>
      <ul>
        <li>
          跨文档消息传送，也叫<span>XDM</span>,指的是页面间传递消息
        </li>
        <li>
          postMessage()用来向另一个页面发送对象，另一个页面绑定message方法，接收这个页面的信息
        </li>
      </ul>
    </li>
    <li>
      <h3>媒体元素</h3>
      <ul>
        <li>video嵌入视频，audio表示嵌入音频</li>
        <li>并非所有的浏览器都支持媒体格式，所以要指定不同的媒体来源</li>
        <li>使用如上那两个标签的play(),pause()方法，组合使用属性事件，很容易创建一个自定义的媒体播放器</li>
      </ul>
    </li>
    <li>
      <h3>历史状态管理</h3>
      <ul>
        <li>
          在web应用中，用户的每次操作不一定会打开一个新的页面，因此，后退和前进按钮也就失去了作用。HTML5通过history对象为管理历史状态提供了方便
        </li>
        <li>
          通过hashchange事件，可以知道URL参数在什么时候发生了变化。而通过history.pushState()可以在不加载新页面的情况下改变浏览器的URL,该方法接受3个参数，<span>状态对象，新状态的标题，和可选的相对URL</span>
        </li>
        <li>
          执行pushState后，新的状态信息就会被加入到历史栈，浏览器的地址栏也会变成新的URL但是浏览器不会真的向服务器发送请求。pushState()会创建新的历史状态，“后退”按钮可以使用了~此时<span>后退按钮会触发浏览器的popState()事件</span>
        </li>
        <li>replaceState()传入的参数与pushState()的前两个参数相同，但不会在历史栈中创建新的状态</li>
        <li>在使用HTML5的状态管理机制时，请确保使用pushState()创造的每一个假URL，在web服务器上都有一个真的，实际存在的URL与之对应。否则，单击“刷新”按钮会导致404错误</li>
      </ul>
    </li>
  </ul>
</body>
</html>